<template>
  <div class="goods-status-chart">
    <div class="goods-status-chart-title">商品状态图</div>
    <div class="goods-status-chart-div">
      <div ref="chart"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goodsStat: {
        type: Object,
        required: true
      }
    },

    computed: {
      goodsStatList() {
        return this.goodsStat.goodsStatList;
      }
    },

    data() {
      return {
        chart: null
      };
    },

    mounted() {
      this.setChart();
      this.erd.listenTo(this.$el, this.chartResetSize);
    },

    methods: {
      setChart() {
        let chartDom = this.$refs['chart'];
        const chart = this.echarts.init(chartDom);
        let option = this.getOption();
        chart.setOption(option, true);
        this.chart = chart;
      },

      getOption() {
        let goodsStatList = this.goodsStatList;
        return {
          grid: {
            left: 50,
            top: 30,
            right: 30,
            bottom: 30
          },
          tooltip: {
            trigger: 'axis',
            formatter(params) {
              let param = params[0];
              let obj = param.value;
              return `${param.marker} ${obj.status} : ${obj.count}`;
            }
          },
          dataset: {
            source: goodsStatList
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          series: [{
            type: 'bar',
            encode: {
              x: 'status',
              y: 'count'
            }
          }]
        }
      },

      chartResetSize(){
        let chart = this.chart;
        if (chart !== null) {
          chart.resize();
        }
      }
    }
  };

</script>

<style lang="scss" scoped>
  .goods-status-chart {
    width: 100%;
    height: 100%;

    .goods-status-chart-title {
      font-size: 20px;
      text-align: center;
    }

    .goods-status-chart-div {
      height: calc(100% - 26px);

      >div {
        width: 100%;
        height: 100%;
      }
    }
  }

</style>
